<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepseek Chat</title>
    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='img/favicon.ico') }}">
</head>
<body>
    <div class="chat-container">
        <div class="chat-box" id="chatBox">
            <!-- Messages will appear here -->
        </div>
        
        <div class="input-container">
            <!-- Add file upload input -->
            <div class="file-upload-container">
                <input type="file" id="fileInput" class="file-input">
                <span id="fileName" class="file-name"></span>
                <button onclick="clearFile()" class="clear-file-btn">✕</button>
            </div>
            
            <div class="message-input-container">
                <textarea id="userInput" placeholder="输入您的问题..."></textarea>
                <button onclick="sendMessage()" id="sendButton">发送</button>
            </div>
        </div>
    </div>

    <style>
    .file-upload-container {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .file-input {
        max-width: 300px;
    }

    .file-name {
        color: #666;
        font-size: 0.9em;
    }

    .clear-file-btn {
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        padding: 0 5px;
    }

    .clear-file-btn:hover {
        color: #666;
    }

    .message-input-container {
        display: flex;
        gap: 10px;
    }
    </style>

    <script>
        let fileContent = null;

        // Add message append function
        function appendMessage(role, content) {
            const chatBox = document.getElementById('chatBox');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role}-message`;
            
            // Convert newlines to <br> tags and preserve spaces
            const formattedContent = content.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
            
            messageDiv.innerHTML = `
                <div class="message-content">
                    <span class="role-indicator">${role === 'user' ? '你' : 'AI'}</span>
                    <span class="message-text">${formattedContent}</span>
                </div>
            `;
            
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // File handling functions
        document.getElementById('fileInput').addEventListener('change', async function(e) {
            const file = e.target.files[0];
            if (file) {
                document.getElementById('fileName').textContent = file.name;
                
                const formData = new FormData();
                formData.append('file', file);
                
                try {
                    const response = await fetch('/api/upload', {
                        method: 'POST',
                        body: formData
                    });
                    const data = await response.json();
                    if (data.file_content) {
                        fileContent = data.file_content;
                    } else {
                        console.error('File upload error:', data.error);
                        alert('文件上传失败');
                    }
                } catch (error) {
                    console.error('Upload error:', error);
                    alert('文件上传失败');
                }
            }
        });

        function clearFile() {
            document.getElementById('fileInput').value = '';
            document.getElementById('fileName').textContent = '';
            fileContent = null;
        }

        // Send message function
        async function sendMessage() {
            const userInput = document.getElementById('userInput');
            const message = userInput.value.trim();
            
            if (!message) return;
            
            // Disable input and button while processing
            const sendButton = document.getElementById('sendButton');
            userInput.disabled = true;
            sendButton.disabled = true;
            
            // Add user message to chat
            appendMessage('user', message);
            userInput.value = '';
            
            try {
                const response = await fetch('/api/chat/deepseek', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        message: message,
                        file_content: fileContent
                    })
                });
                
                const data = await response.json();
                if (data.response) {
                    appendMessage('assistant', data.response);
                } else {
                    appendMessage('assistant', '发生错误: ' + data.error);
                }
            } catch (error) {
                console.error('Error:', error);
                appendMessage('assistant', '发生错误，请稍后重试');
            } finally {
                // Re-enable input and button
                userInput.disabled = false;
                sendButton.disabled = false;
                userInput.focus();
            }
            
            // Clear file content after sending
            clearFile();
        }

        // Add enter key handler
        document.getElementById('userInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
    </script>
</body>
</html> 